<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AdminLTE | Timeline</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="${pageContext.request.contextPath}/resources/css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="${pageContext.request.contextPath}/resources/css/AdminLTE.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.${pageContext.request.contextPath}/resources/js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

	<!-- Content Header (Page header) -->
	<section class="content-header">
		<h1>
			Timeline <small>example</small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
			<li><a href="#">UI</a></li>
			<li class="active">Timeline</li>
		</ol>
	</section>

	<!-- Main content -->
	<section class="content">

		<!-- row -->
		<div class="row">
			<div class="col-md-12">
				<!-- The time line -->
				<ul class="timeline">
					<!-- timeline time label -->
					<li class="time-label"><span class="bg-red"> 10 Feb.
							2014 </span></li>
					<!-- /.timeline-label -->
					<!-- timeline item -->
					<li><i class="fa fa-envelope bg-blue"></i>
						<div class="timeline-item">
							<span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
							<h3 class="timeline-header">
								<a href="#">Support Team</a> sent you and email
							</h3>
							<div class="timeline-body">Etsy doostang zoodles disqus
								groupon greplin oooj voxy zoodles, weebly ning heekya handango
								imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo
								ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu
								weebly balihoo...</div>
							<div class='timeline-footer'>
								<a class="btn btn-primary btn-xs">Read more</a> <a
									class="btn btn-danger btn-xs">Delete</a>
							</div>
						</div></li>
					<!-- END timeline item -->
					<!-- timeline item -->
					<li><i class="fa fa-user bg-aqua"></i>
						<div class="timeline-item">
							<span class="time"><i class="fa fa-clock-o"></i> 5 mins
								ago</span>
							<h3 class="timeline-header no-border">
								<a href="#">Sarah Young</a> accepted your friend request
							</h3>
						</div></li>
					<!-- END timeline item -->
					<!-- timeline item -->
					<li><i class="fa fa-comments bg-yellow"></i>
						<div class="timeline-item">
							<span class="time"><i class="fa fa-clock-o"></i> 27 mins
								ago</span>
							<h3 class="timeline-header">
								<a href="#">Jay White</a> commented on your post
							</h3>
							<div class="timeline-body">Take me to your leader!
								Switzerland is small and neutral! We are more like Germany,
								ambitious and misunderstood!</div>
							<div class='timeline-footer'>
								<a class="btn btn-warning btn-flat btn-xs">View comment</a>
							</div>
						</div></li>
					<!-- END timeline item -->
					<!-- timeline time label -->
					<li class="time-label"><span class="bg-green"> 3 Jan.
							2014 </span></li>
					<!-- /.timeline-label -->
					<!-- timeline item -->
					<li><i class="fa fa-camera bg-purple"></i>
						<div class="timeline-item">
							<span class="time"><i class="fa fa-clock-o"></i> 2 days
								ago</span>
							<h3 class="timeline-header">
								<a href="#">Mina Lee</a> uploaded new photos
							</h3>
							<div class="timeline-body">
								<img src="http://placehold.it/150x100" alt="..." class='margin' />
								<img src="http://placehold.it/150x100" alt="..." class='margin' />
								<img src="http://placehold.it/150x100" alt="..." class='margin' />
								<img src="http://placehold.it/150x100" alt="..." class='margin' />
							</div>
						</div></li>
					<!-- END timeline item -->
					<!-- timeline item -->
					<li><i class="fa fa-video-camera bg-maroon"></i>
						<div class="timeline-item">
							<span class="time"><i class="fa fa-clock-o"></i> 5 days
								ago</span>
							<h3 class="timeline-header">
								<a href="#">Mr. Doe</a> shared a video
							</h3>
							<div class="timeline-body">
								<iframe width="300" height="169"
									src="//www.youtube.com/embed/fLe_qO4AE-M" frameborder="0"
									allowfullscreen></iframe>
							</div>
							<div class="timeline-footer">
								<a href="#" class="btn btn-xs bg-maroon">See comments</a>
							</div>
						</div></li>
					<!-- END timeline item -->
					<li><i class="fa fa-clock-o"></i></li>
				</ul>
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->

		<div class="row" style="margin-top: 10px;">
			<div class="col-md-12">
				<div class="box box-primary">
					<div class="box-header">
						<h3 class="box-title">
							<i class="fa fa-code"></i> Timeline Markup
						</h3>
					</div>
					<div class="box-body">
						<pre style="font-weight: 600;">
&lt;ul class="timeline">

    &lt;!-- timeline time label -->
    &lt;li class="time-label">
        &lt;span class="bg-red">
            10 Feb. 2014
        &lt;/span>
    &lt;/li>
    &lt;!-- /.timeline-label -->

    &lt;!-- timeline item -->
    &lt;li>
        &lt;!-- timeline icon -->
        &lt;i class="fa fa-envelope bg-blue">&lt;/i>
        &lt;div class="timeline-item">
            &lt;span class="time">&lt;i class="fa fa-clock-o">&lt;/i> 12:05&lt;/span>

            &lt;h3 class="timeline-header">&lt;a href="#">Support Team&lt;/a> ...&lt;/h3>

            &lt;div class="timeline-body">
                ...
                Content goes here
            &lt;/div>

            &lt;div class='timeline-footer'>
                &lt;a class="btn btn-primary btn-xs">...&lt;/a>
            &lt;/div>
        &lt;/div>
    &lt;/li>
    &lt;!-- END timeline item -->

    ...

&lt;/ul>
                                    </pre>
					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->

	</section>
	<!-- /.content -->


	<!-- jQuery 2.0.2 -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="${pageContext.request.contextPath}/resources/js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="${pageContext.request.contextPath}/resources/js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->
        <script src="${pageContext.request.contextPath}/resources/js/AdminLTE/demo.js" type="text/javascript"></script>
    </body>
</html>